<template>
  <div class="flash">
    <div class="flash_box">
      <div class="flash_top">
        <div class="flash_title">
          <el-icon><Search /></el-icon>
          <span class="flash_title_content">筛选搜索</span>
        </div>
        <div class="flash_reset_button">
          <el-button>重置</el-button>
          <el-button type="primary" @click="handlerFilter">查询搜索</el-button>
        </div>
      </div>
      <div class="flash_bottom">
        <span class="flash_input_label">活动名称：</span>
        <div class="flash_input_box">
          <el-input type="text" v-model="keyword" placeholder="活动名称" />
        </div>
      </div>
    </div>
    <!-- 添加 -->
    <div class="flash_tianjin">
      <div class="flash_left">
        <div class="flash_left_icon">
          <el-icon><Tickets /></el-icon>
          <span class="flash_left_icon_item">数据列表</span>
        </div>
      </div>
      <div class="flash_right_btn">
        <el-button size="small" @click="$router.push('/sms/flashSession')"
          >添加时间段列表</el-button
        >
        <el-button size="small">添加活动</el-button>
      </div>
    </div>
    <!-- 列表 -->
    <div class="flash_table">
      <el-table :data="tableList" border style="width: 100%">
        <el-table-column type="selection" width="60" />
        <el-table-column prop="id" width="80" label="编号" />
        <el-table-column prop="title" label="活动标题" />
        <el-table-column prop="status" label="活动状态" width="180">
          <template #default="scope">
            <div
              v-if="formatTime(new Date() as any)<scope.row.startDate ? true:false"
            >
              活动未开始
            </div>
            <div
              v-if="formatTime(new Date() as any)>scope.row.startDate && formatTime(new Date() as any)<scope.row.endDate? true:false"
            >
              活动已开始
            </div>
            <div
              v-if="formatTime(new Date() as any)>scope.row.endDate || !scope.row.endDate ? true:false"
            >
              活动已结束
            </div>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" width="180">
          <template #default="scope">
            <div>{{ formatTime(scope.row.startDate) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="180">
          <template #default="scope">
            <div>{{ formatTime(scope.row.endDate) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="上线/下线" width="100">
          <template #default="scope">
            <div>
              <el-switch :value="scope.row.status === 1" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button link type="primary" size="small">查看</el-button>
            <el-button link type="primary" size="small">编辑</el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin: 20px"
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[5, 10, 15]"
        :small="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import useTable from "@/hooks/useTable";
import * as flash from "@/request/modules/flash";
import { Search, Tickets } from "@element-plus/icons-vue";
// 引入dayjs格式化时间
import formatTime from "@/utils/formatTime";
import { ref } from "vue";
import type { FlashListParams } from "@/types/global";

const keyword = ref("");
let {
  tableList,
  fetchData,
  handleSizeChange,
  handleCurrentChange,
  pagination,
} = useTable(flash.getFlashList, { keyword: keyword });

const handlerFilter = () => {
  fetchData();
};
</script>

<style scoped lang="less">
.flash {
  margin-top: 20px;
  padding: 0 20px;
  .flash_box {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    padding: 20px;
    .flash_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .flash_title {
        display: flex;
        align-items: center;
      }
    }
    .flash_bottom {
      margin-top: 15px;
      display: flex;
      align-items: center;
      .flash_input_label {
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        margin-left: 50px;
      }
      .flash_input_box {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
      }
    }
  }
  .flash_tianjin {
    margin-top: 20px;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .flash_left {
      .flash_left_icon {
        display: flex;
        align-items: center;
      }
    }
  }
  .flash_table {
    margin-top: 20px;
    :deep(.el-table .cell) {
      font-size: 12px;
      text-align: center;
      padding-left: 10px;
      // line-height: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
